<template>
	<div>
				<div class="row">
					<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
						<div class="panel bk-widget bk-border-off bk-noradius">
							<div class="bk-bg-white bk-fg-success bk-ltr bk-padding-40" style="height:210px;">
								<div class="row">
									<div class="col-xs-4 text-left bk-vcenter bk-padding-off">
												<span class="bk-round bk-border-off bk-icon bk-icon-3x mobile-logo">
													<!--<i class="fa fa-download fa-3x"></i>-->
												</span>
									</div>
									<div class="col-xs-8 text-center bk-vcenter" v-if="roleInfo.role !== 'ROLE_ADMIN' && roleInfo.role !== 'ROLE_SALES_DIRECTOR'">
										<h6 class="bk-margin-off">卡片总数</h6>
										<h4 class="bk-margin-off">{{cardTotal.activeCount || 0}}</h4>
									</div>
									<div class="col-xs-4 text-center bk-vcenter" v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">
										<h6 class="bk-margin-off">已划拨</h6>
										<h4 class="bk-margin-off">{{cardTotal.activeCount || 0}}</h4>
									</div>
									<div class="col-xs-4 text-center bk-vcenter" v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">
										<h6 class="bk-margin-off">待划拨</h6>
										<h4 class="bk-margin-off">{{cardTotal.idleCount || 0}}</h4>
									</div>
								</div>
								<div class="progress bk-margin-off-bottom bk-margin-top-10 bk-noradius" style="height: 6px;">
									<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
										<span class="sr-only">50% </span>
									</div>
								</div>
								<div class="bk-margin-top-10">
									<div class="row">
										<div class="col-xs-6">
											<small>本月到期卡片数量: {{cardTotal.expiredCount || 0}}</small>
										</div>
										<!--<div class="col-xs-6 text-right">
											<a href="#" class="bk-fg-success bk-fg-darken"><small>View details</small> <i class="fa fa-database"></i></a>
										</div>-->
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
						<div class="panel bk-widget bk-border-off bk-noradius" style="height:210px;background-color: #fff;">
							<div class="panel-body bk-bg-white text-center bk-fg-info bk-padding-top-15 bk-padding-bottom-15">
								<div class="row">
									<div class="col-xs-8 text-left bk-vcenter">
										<div class="">
											<h4 class="bk-margin-off" style="font-weight: 500; color:#0085d0">卡片状态统计</h4>
										</div>
									</div>
									<div class="col-xs-4 bk-vcenter text-right">
										<i class="fa fa-globe fa-4x"></i>
									</div>
								</div>
							</div>
							<div class="list-group">
								<a class="list-group-item">
									<div class="row">
										<div class="col-xs-3">
											待激活
										</div>
										<div class="col-xs-3 text-right">
											<span class="label label-success bk-noradius">{{cardTotal.paCount || 0}}张</span>
										</div>
										<div class="col-xs-3">
											预约销户
										</div>
										<div class="col-xs-3 text-right">
											<span class="label label-danger bk-noradius">0张</span>
										</div>
									</div>
								</a>
								<a class="list-group-item">
									<div class="row">
										<div class="col-xs-3">
											已激活
										</div>
										<div class="col-xs-3 text-right">
											<span class="label label-warning bk-noradius">{{cardTotal.norCount || 0}}张</span>
										</div>
										<div class="col-xs-3">
                      失效
										</div>
										<div class="col-xs-3 text-right">
											<span class="label label-info bk-noradius">0张</span>
										</div>
									</div>
								</a>
								<a class="list-group-item">
									<div class="row">
										<div class="col-xs-3">
											停卡
										</div>
										<div class="col-xs-3 text-right">
											<span class="label label-primary bk-noradius">{{cardTotal.offCount || 0}}张</span>
										</div>
										<!--<div class="col-xs-3">
											更换状态
										</div>
										<div class="col-xs-3 text-right">
											<span class="label label-dark bk-noradius">12张</span>
										</div>-->
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-12">
						<div class="panel">
							<div class="panel-heading bk-bg-primary">
								<h6><i class="fa fa-table red"></i><span class="break"></span>卡片信息</h6>
							</div>

							<div class="panel-body">
								<!--<div style="float: left; margin-bottom: 10px; ">
									<button class="btn btn-warning" @click="addPacket">订购叠加包</button>
								</div>-->
								<div style="float: right; margin-bottom: 10px; width: 180px">
									<!--<div class="input-group" style="float: left;width:350px">
										<input type="email" id="input2-group2" name="input2-group2" class="form-control" placeholder="ICCID、套餐、卡状态、卡类型">
										<span class="input-group-btn">
											<button type="button" class="btn btn-success" @click="cardSearch">Search</button>
										</span>
									</div>-->
									<!--<button class="btn btn-warning" @click="addPacket" v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">订购叠加包</button>-->
									<button class="btn btn-primary" @click="openSearch" style="float: right;" v-text="searchTxt"></button>
								</div>
								<div class="clearfix"></div>
								<div class="wizard-type2" v-show="isOpenSearch">
									<ul class="steps nav nav-pills">
										<li class="complete"><a style="font-size: 14px; color:#269abc" data-toggle="tab"><span class="badge badge-info"><i class="fa fa-star"></i></span> 搜索条件</a></li>
									</ul>
									<div class="progress thin progress-striped active" style="height: 5px;">
										<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
										</div>
									</div>
									<div class="tab-content">
										<div class="tab-pane active" id="tab22">
											<div class="row">
												<div class="col-sm-12">
													<div class="form-group has-feedback">
														<label>ICCID</label>
														<div class="input-group">
															<span class="input-group-addon">
																<i class="fa fa-asterisk"></i>
															</span>
															<input type="text" class="form-control" name="start" v-model="iccid">
															<!--<span class="input-group-addon">to</span>
															<input type="text" class="form-control" name="end">-->
														</div>
													</div>
												</div>
												<div class="col-sm-12">
													<div class="form-group has-feedback">
														<label>生效日期</label>
														<div class="input-group">
															<span class="input-group-addon">
																<i class="fa fa-calendar"></i>
															</span>
															<input type="date" class="form-control" name="start" v-model="activetimeStart">
															<span class="input-group-addon">to</span>
															<input type="date" class="form-control" name="end" v-model="activetimeEnd">
														</div>
													</div>
												</div>
											</div>
											<div class="row">
												<div class="form-group col-sm-4">
													<label>卡状态</label>
													<select class="form-control" v-model="cardStatus">
														<option value="">全部</option>
														<option value="NOR">已激活</option>
														<option value="PA">待激活</option>
														<option value="OFF">停机</option>
													</select>
												</div>
												<div class="form-group col-sm-4">
													<label>卡类型</label>
													<select class="form-control" v-model="cardType">
														<option v-for="(opts, key) in orderCardType.result" :value="key">{{opts}}</option>
													</select>
												</div>
												<div class="form-group col-sm-4">
													<label>套餐</label>
													<select class="form-control" v-model="packagecode">
														<option v-for="(opts, key) in basicsPackage.result" :value="opts.packageCode">{{opts.packageName}}</option>
													</select>
												</div>
											</div>

											<div class="row">
												<!--<div class="form-group col-sm-4">
													<label>客户名称</label>
													<select class="form-control" v-model="activetime">
														<option>全部</option>
														<option>休眠期</option>
														<option>测试期</option>
														<option>可激活</option>
														<option>已激活</option>
														<option>停用</option>
														<option>作废</option>
													</select>
												</div>-->
												<div class="form-group col-sm-4">
													<label>剩余流量</label>
													<select class="form-control" v-model="datasurplus">
														<option value="">全部</option>
														<option value="10">少于10M</option>
														<option value="20">少于20M</option>
														<option value="50">少于50M</option>
													</select>
												</div>
												<!--<div class="form-group col-sm-4">
													<label>所属账号</label>
													<select class="form-control" v-model="customerId">
														<option>全部</option>
														<option>贴片IC</option>
														<option>工业级标准卡</option>
														<option>Micro卡</option>
														<option>Nano卡</option>
													</select>
												</div>-->
											</div>
										</div>

										<div class="actions">
											<input type="button" class="btn btn-info button-previous" name="previous" value="搜索" @click="cardSearch">
											<input type="button" class="btn btn-info button-previous" name="previous" value="重置" @click="cardReset">
										</div>
										<br>
									</div>
								</div>

								<div class="table-responsive" style="overflow: auto;">
									<table class="table table-striped table-bordered bootstrap-datatable datatable">
										<thead>
										<tr>
											<!--<th style="min-width: 50px;">
												<label>
													<input type="checkbox" name="cardallcheck" v-model="cardAllCheck">
												</label>
											</th>-->
											<th style="min-width: 50px;">序号</th>
											<th>ICCID</th>
											<th>卡号码</th>
											<th>生效日期</th>
											<th v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">原始套餐</th>
											<th>套餐</th>
											<!--<th>叠加包套餐</th>-->
											<th>卡状态</th>
											<th>当月实时流量</th>
											<th>剩余流量</th>
											<th>有效日期</th>
											<th>客户名称</th>
											<!--<th>所属账号</th>-->
										</tr>
										</thead>
										<tbody>

										<tr v-for="(items, index) in cardCMCC.result">
											<!--<td>
												<label>
													<input type="checkbox" name="cardcheck" :data-id="items.secondaryId">
												</label>
											</td>-->
											<td>{{index + 1}}</td>
											<td>{{items.iccid}}</td>
											<td>{{items.msisdn}}</td>
											<td>{{items.activetime}}</td>
											<td v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">{{items.originPackageName}}</td>
											<td>{{items.soldPackageName}}</td>
											<!--<td>
												<ul class="notifications hidden-sm hidden-xs" style="margin: 0; height: auto;">
													<li style="margin: 0; ">
														<a @click="packageMore(items.secondaryId)" class="dropdown-toggle notification-icon" data-toggle="dropdown">
															<i class="fa fa-tasks"></i>
														</a>
														<ul class="dropdown-menu update-menu" role="menu">
															<li v-for="items in cardPackage.result">
																<a><i class="fa fa-plus-square bk-fg-primary"></i> {{items.overlayPackageName}} </a>
															</li>
														</ul>
													</li>
												</ul>
											</td>-->
											<td>{{items.statusName}}</td>
											<td>{{items.datammonth}}M</td>
											<td>{{items.datasurplus}}M</td>
											<td>{{items.expiredtime}}</td>
											<td>{{items.customerName}}</td>
											<!--<td>{{items.customerId}}</td>-->
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>

					<lsc-page
									mode="event"
									:totalPage="pages"
									:init-page="eventPage"
									:eventFunt="eventFunt"
									:eventParams="eventParams"
									@go-page="goPage"></lsc-page>
				</div>


				<!-- Modal Dialog 叠加包 -->
				<!--v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'"-->
				<div class="modal fade" id="addPacket" v-if="isOpen">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title bk-fg-primary">添加叠加包</h4>
							</div>
							<div class="modal-body">
								<div class="panel-body">
									<div class="form-horizontal ">
										<div class="form-group">
											<label class="col-md-3 control-label">卡类型</label>
											<div class="col-md-9">
												<select name="select" class="form-control" size="1" v-model="overlyingCardType">
													<option v-for="(opts, key) in orderCardType.result" :value="key">{{opts}}</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-3 control-label">套餐</label>
											<div class="col-md-9">
												<select name="select" class="form-control" size="1" v-model="overlyingCardPackage">
													<option v-for="(opts, key) in overlyingPackage.result" :value="opts.packageCode">{{opts.packageName}}</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-3 control-label">备注</label>
											<div class="col-md-9">
												<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="备注" v-model="overlyingCardRemarks"></textarea>
											</div>
										</div>
									</div>
								</div>

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<button type="button" class="btn btn-primary" @click="packageSave">提交</button>
							</div>
						</div>
					</div>
				</div>
				<!-- End Modal Dialog -->
	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				roleInfo: 'getRoleInfo',
				cardCMCC: 'getCardCMCC',
				cardTotal: 'getCardCMCCTotal',
				orderCardType: 'getOrderCardType',
				basicsPackage: 'getBasicsPackage',
				overlyingPackage: 'getOverlyingPackage',
				cardPackage: 'getCardPackage'

			}),
			pages () {
				if(this.cardCMCC.pageInfo){
					return this.cardCMCC.pageInfo.totalPage
				}
			}
		},
		data () {
			return {
				classids: '',
				isOpen: false,
				isOpenSearch: false,
				searchTxt: '高级搜索',
				pageNumber: 0, // 页数
				//totalPage: 0,  // 总页数
				eventPage: 1,
				eventFunt: 'fetchCardCMCC',
				eventParams: {},
				operatorId: '10086',
				cardAllCheck: 0, // 是否选中
				cardType: '', //  卡类型
				overlyingCardType: '', // 叠加包卡类型
				overlyingCardPackage: '', // 叠加包套餐
				overlyingCardRemarks: '', // 叠加包备注
				secondaryIds: '', // 叠加包子订单ID

				iccid: '',
				activetimeStart: '',
				activetimeEnd: '',
				cardStatus: '',
				packagecode: '',
				datasurplus: '',
				customerId: ''
			}
		},
		methods: {

			// 展开或收起高级搜索
			openSearch () {
				if(!this.isOpenSearch){
					this.isOpenSearch = true
					this.searchTxt = '收起搜索'
					return
				}
				this.isOpenSearch = false
				this.searchTxt = '高级搜索'
			},

			addPacket () {
				$('#addPacket').modal('show')
			},

			goPage (data) {
				this.eventPage = data.page
			},

			// 查看叠加包
			packageMore (ids) {
				this.$store.dispatch('fetchCardPackage', ids)
			},

			// 新增叠加包
			packageSave () {

				let self = this

				console.log(this.overlyingCardPackage)
				if(!this.overlyingCardPackage) {
					alert('叠加包订单不能为空')
					return
				}

				self.secondaryIds = ''
				$("input[name='cardcheck']:checkbox:checked").each(function(i){

					self.secondaryIds +=  (i <= 0) ?  $(this).data('id') : "," + $(this).data('id');
				})

				if(self.secondaryIds == '') {
					return alert('请选择要添加叠加包的卡')
				}
				let params = {
					secondaryIds: self.secondaryIds,
					packageCode: self.overlyingCardPackage,
					comments: self.overlyingCardRemarks
				}
				self.$store.dispatch('fetchPackageAdd', params)
			},

			// 查询
			cardSearch () {

				let params = {
					page: 1,
					iccid: this.iccid,
					packagecode: this.packagecode,
					activetimeStart: this.activetimeStart,
					activetimeEnd: this.activetimeEnd,
					status: this.cardStatus,
					datasurplus: this.datasurplus,
					customerId: this.customerId
				}

				this.eventParams.iccid = this.iccid
				this.eventParams.activetimeStart = this.activetimeStart
				this.eventParams.activetimeEnd = this.activetimeEnd
				this.eventParams.status = this.cardStatus
				this.eventParams.packagecode = this.packagecode
				this.eventParams.datasurplus = this.datasurplus
				this.eventParams.customerId = this.customerId
				this.$store.dispatch('fetchCardCMCC', params)
			},
			// 搜索重置
			cardReset () {

				// 搜索条件重置
				this.iccid = ''
				this.packagecode = ''
				this.activetimeStart = ''
				this.activetimeEnd = ''
				this.cardStatus = ''
				this.datasurplus = ''
				this.customerId = ''
				this.cardType = ''

				// 翻页条件重置
				this.eventParams.iccid = ''
				this.eventParams.activetimeStart = ''
				this.eventParams.activetimeEnd = ''
				this.eventParams.status = ''
				this.eventParams.packagecode = ''
				this.eventParams.datasurplus = ''
				this.eventParams.customerId = ''
			}

		},
		mounted () {

			// 角色
			this.$store.dispatch('fetchRole')

			// 卡信息
			let params = {
				page: 1,
				iccid: this.iccid,
				packagecode: this.packagecode,
				activetimeStart: this.activetimeStart,
				activetimeEnd: this.activetimeEnd,
				status: this.cardStatus,
				datasurplus: this.datasurplus,
				customerId: this.customerId
			}

			this.eventParams.iccid = this.iccid
			this.eventParams.activetimeStart = this.activetimeStart
			this.eventParams.activetimeEnd = this.activetimeEnd
			this.eventParams.status = this.cardStatus
			this.eventParams.packagecode = this.packagecode
			this.eventParams.datasurplus = this.datasurplus
			this.eventParams.customerId = this.customerId
			this.$store.dispatch('fetchCardCMCC', params)

			// 卡统计
			this.$store.dispatch('fetchCardStatistics')

			// 卡类型
			this.$store.dispatch('fetchOrderCardType', this.operatorId)

			// 卡基础套餐
			let packageParams = {
				cardTypeId: 'A',
				operatorId: '10086'
			}
			this.$store.dispatch('fetchBasicsPackage', packageParams)

		},
		components: {
			LscPage
		},
		watch: {
			// 查询刷新翻页
			cardCMCC (newVal) {
				this.eventPage = newVal.pageInfo.pageIndex
			},
			// 基础套餐
			cardType (newVal) {

				let packageParams = {
					cardTypeId: newVal,
					operatorId: '10086'
				}
				this.$store.dispatch('fetchBasicsPackage', packageParams)
			},
			// 叠加包套餐
			overlyingCardType (newVal) {

				this.overlyingCardPackage = ''
				let packageParams = {
					cardTypeId: newVal,
					operatorId: '10086'
				}
				this.$store.dispatch('fetchOverlyingPackage', packageParams)
			},
			// 是否全选
			cardAllCheck (newVal) {
				if(newVal) {
					$("input[name='cardcheck']").prop("checked", "checked");
				}else {
					$("input[name='cardcheck']").prop("checked", "");
				}
			}
		}
	}
</script>

<style>

</style>
